<template>
	<div :style="styleObj" class="decorate-textNav">
    <ul class="text-nav-box">
        <li  :class="['nav-item',...itemClassName]" v-for="(item, index) in navList" :key="index" :style="[{background:item.bgColor},styleObj1]">
          <a href="javascript:;" @click="openLink(item.link)">{{item.showtitle}} </a>
          <b></b>
        </li>
      </ul>
  </div>
</template>

<script>
  /**
   * @Author: yqe@360shop.cn
   * @Date: 2020年07月08日15:11:21
   * @Last Modified by: yqe@360shop.cn
   * @Last Modified time: 2020年07月08日15:11:21
   */
  import { openPage } from '@/utils/utils'
  import Vue from 'vue'

  export default Vue.extend({
    name: 'index',
    data() {
      return {
        navList: [],
        styleObj: {},
        styleObj1: {},
        itemClassName: []
      }
    },
    props: {
      tplItemData: {
        type: Object // 传入参数的类型
      }
    },
    methods: {
      openLink(link){
        openPage(link)
      }
    },
    mounted() {
      // console.log(this.tplItemData)
      this.navList = this.tplItemData.dataset
      this.styleObj.padding = this.tplItemData.modulePadding + 'px 0px'
    }
  })
</script>

<style lang='scss'>
.decorate-textNav{
  ul{width: 100%;
    overflow: hidden;
    border-top: #ededed solid 2px;
    li{
      border: 2px solid #ededed;
      height: 56px;
      line-height: 56px;
      background: #f9f9f9;
      border-top: 0;
      position: relative;
      a{
        color: #646464;
        display: block;
        padding-left: 40px;
      }
      b{
        font-weight: 400;
        font-style: normal;
        display: block;
        position: absolute;
        top: 20px;
        right: 20px;
        width: 12px;
        height: 12px;
        border: 2px solid #b8b7b7;
        border-width: 2px 2px 0 0;
        transform: rotate(45deg);
      }
    }
  }
}
</style>
